<template>
	<view class="content">
		<view class="mianBody">
			<itemFile v-for="(item,index) in listCard" :item='item' :key="index" color='#fff'
				:class="index==2?'cardtop':''">
				<template #head>
					<view class="tag">{{item.name}}</view>
				</template>
				<template #markedict>
					<view class="markValue" v-for="(itempath,index) in fileList" :key="index" @click="downLoad(itempath.path)">
						查看附件 <image src="../../static/gree.png" class="right_img"></image>
					</view>
				</template>
				<view class="soltValue" v-if='index==2'>
					<u-line></u-line>
					<p class="total">合计（净重）：<span>100</span>kg</p>
					<p class="total" style="color:#999999;">每个空桶重4.3kg</p>
					<view style="margin-top:28rpx" class="edict-button">
					</view>
					<u-line></u-line>
					<p class="total" style="color:#999999;text-align: left;">
						<span style="font-size: 30rpx;">交接人</span>
						<span style="font-size: 30rpx;color: black;margin-left: 40rpx;">张三</span>
					</p>
				</view>
			</itemFile>
		</view>
	</view>
</template>

<script>
	import {
		getFileAuthPath
	} from '../../utils/api.js'
	// 两种状态收运都用这个（）
	export default {
		data() {
			return {
				fileList: [],
				listCard: [{
						title: JSON.parse(uni.getStorageSync('detail')).institutionName,
						name: JSON.parse(uni.getStorageSync('detail')).institutionType || '-',
						child: [{
								width: '100%',
								title: '客户简称',
								mark: JSON.parse(uni.getStorageSync('detail')).institutionShortName,
							},
							{
								width: '100%',
								title: '所属片区',
								mark: JSON.parse(uni.getStorageSync('detail')).administrativeRegion || '',
								value: 'test'
							},
							{
								width: '100%',
								title: '联系人',
								mark: JSON.parse(uni.getStorageSync('loginUser')).simpleUserInfo.nickName + '-' + JSON.parse(uni.getStorageSync('loginUser')).simpleUserInfo.phone,
								value: 'testtesttesttesttesttesttest'
							},
							{
								width: '100%',
								title: '客户地址备份',
								mark: '11',
								mark: JSON.parse(uni.getStorageSync('detail')).institutionAddress,
							},
						]

					},
					{
						child: [{
								width: '100%',
								title: '合同编号',
								value: 'test',
								mark: JSON.parse(uni.getStorageSync('detail')).contractNumber || '',
							},
							{
								width: '100%',
								title: '开始日期',
								mark: JSON.parse(uni.getStorageSync('detail')).contractBeginDate  || '',
							},
							{
								width: '100%',
								title: '结束日期',
								mark: JSON.parse(uni.getStorageSync('detail')).contractEndDate || '',
								value: 'testtesttesttesttesttesttest'
							},
							{
								width: '100%',
								title: '合同金额',
								mark: JSON.parse(uni.getStorageSync('detail')).contractMoney || '',
								value: 'testtesttesttesttesttesttest'
							},
							{
								width: '100%',
								title: '合同附件',
								mark: 'file'
							},

						]

					}
				]
			}
		},
		onLoad() {},
		onShow() {
			let filse = JSON.parse(uni.getStorageSync('detail')).contractAttachment
			if (filse) {
				getFileAuthPath({
					fileIds: filse
				}).then(res => {
					this.fileList = res.data
				})
			}
		},

		methods: {
			downLoad(url) {
				console.log('url:', url)
				uni.downloadFile({
					url: url, // 文件地址
					success: (res) => {
						if (res.statusCode === 200) {
							// 下载成功后打开文件
							uni.openDocument({
								filePath: res.tempFilePath,
								showMenu: true,
								success: function() {
									console.log('文件打开成功');
								},
								fail: function(err) {
									console.log('文件打开失败', err);
								}
							});
						}
					},
					fail: (err) => {
						console.log('文件下载失败', err);
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.right_img {
		width: 40rpx;
		height: 40rpx;
	}

	.markValue {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
		text-align: left;
		color: #3db020;
		display: flex;
		align-items: center;
	}

	.edict-button {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx
	}

	.head {
		width: 750rpx;
		height: 276rpx;
		position: fixed;
		top: 0;
		z-index: 1;
		background: url(@/static/sy.png) no-repeat;
		background-size: contain;
	}

	.soltValue {
		text-align: right;

		.total {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Semibold;
			font-weight: Semibold;
			text-align: right;
			color: #333333;
			padding: 20rpx 0;

			span {
				font-size: 40rpx;
			}
		}

	}

	.cardtop {
		position: relative;
		top: -20rpx;

	}

	.tag {
		width: 80rpx;
		height: 40rpx;
		background: rgba(61, 176, 32, 0.10);
		border-radius: 6rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
		text-align: center;
		color: #3db020;
		margin-left: 20rpx;
		margin-top: 2rpx;
	}

	.fouter {
		display: flex;
		gap: 20rpx;
		justify-content: center;
		margin-bottom: 40rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.time {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
		text-align: right;
		color: #999999;
		position: absolute;
		top: 36rpx;
		left: 400rpx;
	}
</style>